<!--
    * Time    : 2021-02-22 09:11:46
    * Author  : zhangTj
    * Desc    : 个人店铺 - 分类页面
-->

<template>
    <div class="w750 bg-fff">
        <div class="d-flex font-14">
            <div style="width: 85px; padding-bottom: 80px" class="bg-f8 h-100vh overflow-y-scroll">
                <div>
                    <ul>
                        <li
                            @click="changeCategory(index, item)"
                            v-for="(item, index) in categoryList"
                            :key="item.id"
                            class="text-center text-999 position-relative line-clamp1"
                            :class="{ cur: currentIndex == index, 'font-14': currentIndex == index, 'font-12': currentIndex != index }"
                            style="padding: 13px 15px"
                        >
                            {{ item.name }}
                        </li>
                    </ul>
                </div>
            </div>
            <div class="flex-1 h-100vh overflow-y-scroll" style="padding-bottom: 80px">
                <div>
                    <van-list
                        v-if="!partLoading && !paging.emptylist"
                        v-model="paging.loading"
                        :finished="paging.finished"
                        :immediate-check="false"
                        finished-text="没有更多了"
                        @load="loadMore"
                    >
                        <div
                            @click="$toPage('/goodsDetail', { goodsInfoId: goodItem.prodId })"
                            class="px-1 py-2 border-top d-flex a-center"
                            v-for="goodItem in list"
                            :key="goodItem.prodId"
                        >
                            <div style="width: 90px; height: 90px">
                                <legend-image
                                    style="border-radius: 5px"
                                    class="w-100 h-100"
                                    :pic="goodItem.prodPic"
                                    :options="{ w: '90', h: '90' }"
                                    :isJD="goodItem.prodSource == 'JD'"
                                />
                            </div>
                            <div class="flex-1 ml-1 d-flex flex-column j-sb a-self-normal">
                                <div class="d-flex flex-column">
                                    <span class="line-clamp2">
                                        {{ goodItem.prodName }}
                                    </span>
                                    <div class="font-12 mt">
                                        <span
                                            class="text-fff rounded-2"
                                            style="padding: 2px 4px"
                                            :style="{ background: `linear-gradient(270deg, ${themes.color} 0%, ${themes.color} 100%)` }"
                                        >
                                            赚￥{{ money(goodItem.firstCommission)[0] }}.{{ money(goodItem.firstCommission)[1] }}
                                        </span>
                                    </div>
                                </div>
                                <div class="d-flex j-sb a-center">
                                    <div class="text-main">
                                        <span class="font-12">￥</span>
                                        <span class="font-18">{{ money(goodItem.price)[0] }}.{{ money(goodItem.price)[1] }}</span>
                                    </div>
                                    <div
                                        @click.stop="selectItem(goodItem.prodId)"
                                        v-if="!goodItem.selected"
                                        class="border rounded-15 font-12"
                                        :class="[selectList.includes(goodItem.prodId) ? 'select' : 'text-main border-c-main']"
                                        style="padding: 4px 10px"
                                    >
                                        <span>{{ selectList.includes(goodItem.prodId) ? '已选' : '选择' }}</span>
                                    </div>
                                    <div v-else style="padding: 4px 10px" class="text-999 font-12">
                                        <span>已选</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </van-list>
                </div>

                <Noempty
                    v-if="paging.emptylist && !paging.error"
                    :pic="require('@/assets/images/personal-no-good.png')"
                    title="该分类下暂无商品，请选择其他分类"
                    :styleObj="{
                        height: '100%',
                        display: 'flex',
                        flexDirection: 'column',
                        alignContent: 'center',
                        justifyContent: 'center'
                    }"
                ></Noempty>

                <part-loading v-model="partLoading" backgroundColor="#fff" height="400px" size="24px" :color="themes.color" />
            </div>
        </div>

        <!-- 添加商品 -->
        <transition name="van-slide-up">
            <div @click="saveProd" v-show="selectList.length > 0" class="position-fixed font-14 bottom-0 left-0 w-100" style="padding: 6px 20px">
                <div class="text-center">
                    <div class="border rounded-20 text-fff bg-main" style="padding: 9px 50px">
                        <span>确定（共{{ selectList.length }}件商品）</span>
                    </div>
                </div>
            </div>
        </transition>
    </div>
</template>

<script>
import PartLoading from '@/components/PartLoading/PartLoading'
import Noempty from '@/components/Noempty/Noempty'
import PageUtil from 'utils/PageUtil'
import { distributorShopSelectProd, distributorShopQueryCategory, distributorShopSaveProd } from '@/api/personal'
import cash from 'utils/tool'
import { mapState } from 'vuex'
import legendImage from 'components/legendImage/legendImage'

const pageUtil = new PageUtil(distributorShopSelectProd)

export default {
    name: '',
    components: { PartLoading, Noempty, legendImage },
    data() {
        return {
            currentIndex: 0, // 当前的分类index
            selectList: [], // 选择的商品数组
            partLoading: true, // 局部加载loadding
            paging: {
                tab: true,
                loading: false,
                finished: false,
                error: false, // 是否错误
                emptylist: false // 是否显示列表为空时的样式
            },
            list: [],
            params: {
                firstCatId: '' // 	一级类目id
            },
            money: cash,
            categoryList: [] // 分类数组
        }
    },
    computed: {
        ...mapState(['themes'])
    },
    watch: {},
    created() {},
    destroyed() {},
    mounted() {
        this.getCategoryList()
    },
    methods: {
        // 加载更多
        loadMore() {
            pageUtil.loadListByPageMore(this.params, {
                success: (_, res) => {
                    for (let good of res.result.resultList) {
                        if (good.selected) {
                            this.selectList.push(good.prodId)
                        }
                    }
                }
            })
        },

        // 加载商品(用于第一次加载数据)
        loadGoodPage() {
            pageUtil.loadListByPage(this, this.params, {
                success: (_, res) => {
                    this.partLoading = false
                    // // 判断商品是否已经勾选
                    // for (let good of res.result.resultList) {
                    //     if (good.selected) {
                    //         this.selectList.push(good.prodId)
                    //     }
                    // }
                }
            })
        },

        // 获取分类
        getCategoryList() {
            distributorShopQueryCategory()
                .then((res) => {
                    if (!res.success) {
                        this.$toast(res.msg)
                        return
                    }
                    this.categoryList = res.result
                    if (res.result.length > 0) {
                        this.$set(this.params, 'firstCatId', res.result[0].id)
                        this.loadGoodPage()
                    } else {
                        this.partLoading = false
                        this.$set(this.paging, 'emptylist', true)
                    }
                })
                .catch((err) => {
                    this.$toast(err.msg)
                })
        },

        // 选择分类
        changeCategory(index, item) {
            if (index == this.currentIndex) {
                return
            }
            this.currentIndex = index
            this.partLoading = true
            this.$set(this.params, 'firstCatId', item.id)
            this.$set(this.params, 'curPageNO', 1)
            this.loadGoodPage()
        },

        // 添加商品(如果有则删除，反之添加)
        selectItem(index) {
            if (this.selectList.includes(index)) {
                this.selectList.splice(
                    this.selectList.findIndex((item) => item == index),
                    1
                )
            } else {
                this.selectList.push(index)
            }
        },

        // 保存添加商品
        saveProd() {
            distributorShopSaveProd({
                prodIds: this.selectList.join(',')
            })
                .then((res) => {
                    if (!res.success) {
                        this.$toast(res.msg)
                        return
                    }
                    this.$toast('添加成功')
                    this.selectList = []
                    this.loadGoodPage() //
                })
                .catch((err) => {
                    this.$toast(err.msg)
                })
        }
    }
}
</script>

<style scoped>
.select {
    color: #999 !important;
    border-color: #e4e4e4 !important;
}

.cur {
    background: #fff;
    color: #333 !important;
}
.cur:before {
    content: '';
    display: block;
    width: 4px;
    height: 14px;
    background: var(--themescolor);
    position: absolute;
    left: 0;
    top: 16px;
}
</style>
